<template>
  <div class="main">
    <!-- nav -->
    <div class="nav">
      <el-menu class="el-menu-demo" mode="horizontal">
        <el-menu-item index="1" @click="canShow">主页</el-menu-item>
        <el-menu-item index="2" @click="shopCarShow">购物车</el-menu-item>
        <el-menu-item index="3" @click="$router.push('/gdmap')">高德地图</el-menu-item>
      </el-menu>
    </div>
    <!-- content -->
    <div class="content" v-show="isShows">
      <div class="search">
        <el-input placeholder="请输入姓名查找" v-model="search" clearable></el-input>
      </div>
      <table>
        <thead>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>手机</th>
          <th>工号</th>
          <th>薪资</th>
          <th>操作</th>
        </thead>
        <tbody v-for="(item,index) in filterSearch" :key="index">
          <tr>
            <td>{{item.input}}</td>

            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.phone}}</td>
            <td>{{item.wordId}}</td>
            <td>{{item.money}}</td>
            <td class="el-icon-delete" @click="deleInfo(index)"></td>
            <td>
              <router-link :to="item.age">
                <i class="el-icon-user-solid" @click="details(index)"></i>
              </router-link>
            </td>
          </tr>
        </tbody>
      </table>
      <h1>{{hellow}}</h1>
      <transition name="tran">
        <div v-show="isShow">
          <router-view :id="id"></router-view>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import LoginVue from "../login/Login.vue";
export default {
  data() {
    return {
      isShows: true,
      isShow: false,
      tableData: [],
      id: "",
      search: "",
      informations: {},
    };
  },
  created() {
    axios
      .get("https://element-2eaa4.firebaseio.com/peopleInfo.json")
      .then((res) => {
        return res.data;
      })
      .then((data) => {
        for (let datas in data) {
          //   console.log(datas);
          this.id = datas;
          this.tableData.push(data[datas]);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  //   https://element-2eaa4.firebaseio.com/peopleInfo/-MBySHvQVtBWyNjeJMEh
  methods: {
    shopCarShow() {
      // console.log(11);
      this.$router.push("/backstage");
    },
    canShow() {
      this.isShows = !this.isShows;
    },
    deleInfo(index) {
      // console.log(index);
      const del = confirm("确认要删除么？");
      if (del) {
        this.tableData.splice(index, 1);
        axios.delete(
          "https://element-2eaa4.firebaseio.com/peopleInfo/" + this.id + ".json"
        );
        // window.location.reload();
      } else {
        return;
      }
    },
    details(index) {
      this.isShow = !this.isShow;
      // if (this.isShow == false) {
      // setTimeout(() => {
      // window.location.reload();
      // }, 5000);
      // } else {
      // }
    },
  },
  computed: {
    // 查询功能的实现
    filterSearch() {
      return this.tableData.filter((searchInfomation) => {
        return searchInfomation.input.match(this.search);
      });
    },
    hellow() {
      var date = new Date().toLocaleString();
      return date;
    },
  },
};
</script>
<style lang="less" scoped>
table {
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
}
table td,
table th {
  border: 1px solid #cad9ea;
  color: #666;
  height: 30px;
}
table thead th {
  background-color: #cce8eb;
  width: 100px;
}
.el-icon-delete {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0;
  //   border-top: 0;
  //   border-left: 0;
  text-align: center;
  line-height: 34px;
}
.el-icon-edit {
  padding-left: 0px;
}
.search {
  width: 200px;
}
.tran-enter-active,
.tran-leave-active {
  transition: all 0.2s linear;
}
.tran-enter,
.tran-leave-to {
  transform: translateX(200px);
  opacity: 0;
}
.tran-leave,
.tran-enter-to {
  transform: rotate(10deg);
}
.el-menu-demo {
  margin: 0px 40px;
}
</style>